<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>控制台</title>
    <link rel="stylesheet" href="${ctxPath}/assets/libs/layui/css/layui.css"/>
    <link rel="stylesheet" href="${ctxPath}/assets/module/admin.css">
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        /** 统计快捷方式样式 */
        .console-link-block {
            font-size: 16px;
            padding: 20px 20px;
            border-radius: 4px;
            background-color: #40D4B0;
            color: #FFFFFF !important;
            box-shadow: 0 2px 3px rgba(0, 0, 0, .05);
            position: relative;
            overflow: hidden;
            display: block;
        }

        .console-link-block .console-link-block-num {
            font-size: 40px;
            margin-bottom: 5px;
            opacity: .9;
        }

        .console-link-block .console-link-block-text {
            opacity: .8;
        }

        .console-link-block .console-link-block-icon {
            position: absolute;
            top: 50%;
            right: 20px;
            width: 50px;
            height: 50px;
            font-size: 50px;
            line-height: 50px;
            margin-top: -25px;
            color: #FFFFFF;
            opacity: .8;
        }

        .console-link-block .console-link-block-band {
            color: #fff;
            width: 100px;
            font-size: 12px;
            padding: 2px 0 3px 0;
            background-color: #E32A16;
            line-height: inherit;
            text-align: center;
            position: absolute;
            top: 8px;
            right: -30px;
            transform-origin: center;
            transform: rotate(45deg) scale(.8);
            opacity: .95;
            z-index: 2;
        }

        /** //统计快捷方式样式 */

        /** 设置每个快捷块的颜色 */
        .layui-row > div:nth-child(2) .console-link-block {
            background-color: #55A5EA;
        }

        .layui-row > div:nth-child(3) .console-link-block {
            background-color: #9DAFFF;
        }

        .layui-row > div:nth-child(4) .console-link-block {
            background-color: #F591A2;
        }

        .layui-row > div:nth-child(5) .console-link-block {
            background-color: #FEAA4F;
        }

        .layui-row > div:last-child .console-link-block {
            background-color: #9BC539;
        }
    </style>
</head>
<body>
<!-- 正文开始 -->
<div class="layui-fluid ew-console-wrapper">
    <!-- 快捷方式 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
            <div class="console-link-block">
                <div class="console-link-block-num" id="sysuser">15</div>
                <div class="console-link-block-text">系统用户</div>
                <i class="console-link-block-icon layui-icon layui-icon-survey"></i>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6" style="display: none">
            <div class="console-link-block">
                <div class="console-link-block-num" id="sysuser1">2</div>
                <div class="console-link-block-text">督导专家</div>
                <i class="console-link-block-icon layui-icon layui-icon-print"></i>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
            <div class="console-link-block">
                <div class="console-link-block-num" id="sysuser2">3</div>
                <div class="console-link-block-text">教员人数</div>
                <i class="console-link-block-icon layui-icon layui-icon-list"
                   style="font-size: 62px;padding-right: 5px;"></i>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
            <div class="console-link-block" id="schoolAnaly">
                <div class="console-link-block-num" id="sysuser3">1</div>
                <div class="console-link-block-text">学员人数</div>
                <i class="console-link-block-icon layui-icon layui-icon-date"></i>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
            <div class="console-link-block">
                <div class="console-link-block-num" id="sysuser4">1</div>
                <div class="console-link-block-text">其他人员</div>
                <i class="console-link-block-icon layui-icon layui-icon-service"></i>
            </div>
        </div>
        <div class="layui-col-md2 layui-col-sm4 layui-col-xs6">
            <div class="console-link-block" id="questionInfo">
                <div class="console-link-block-num" id="sysuser5">4</div>
                <div class="console-link-block-text">问卷数量</div>
                <i class="console-link-block-icon layui-icon layui-icon-email"></i>
            </div>
        </div>
    </div>
    <!-- 统计图表 -->
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">培训层次</div>
                <div class="layui-card-body">
                    <div id="consoleChartsDay" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">立功受奖</div>
                <div class="layui-card-body">
                    <div id="consoleChartsWeek" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header" style="float: left">活动情况</div>
                <div class="layui-card-header" style="z-index: 9999;width: 200px;margin-left: 140px">
                    <div id="orgSelectBox" class="ew-xmselect-tree"></div>
                </div>
                <div class="layui-card-body">
                    <div id="consoleChartsMonth" style="height: 300px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header" style="float: left">学期</div>
                <!--<div class="layui-card-header" style="z-index: 9999;width: 200px;float: left;padding-left: 0px">
                    <div id="orgSelectBox1" class="ew-xmselect-tree"></div>
                </div>-->
                <div class="layui-card-header" style="z-index: 9999;width: 200px;padding-left: 50px">
                    <div id="team"></div>
                </div>
                <div class="layui-card-body">
                    <div id="consoleChartsWord" style="height: 350px;margin-top: 0px"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">单位平均成绩</div>
                <div class="layui-card-body">
                    <div id="consoleAverage" style="height: 350px;"></div>
                </div>
            </div>
        </div>
        <div class="layui-col-md4 layui-col-sm6">
            <div class="layui-card" style="overflow: hidden;">
                <div class="layui-card-header">单位优秀率</div>
                <div class="layui-card-body">
                    <div id="consoleRate" style="height: 350px;"></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- js部分 -->
<script src="${ctxPath}/assets/libs/layui/layui.js"></script>
<script src="${ctxPath}/assets/js/common.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts.min.js"></script>
<script src="${ctxPath}/assets/libs/echarts/china.js"></script>
<script src="${ctxPath}/assets/libs/echarts/echarts-wordcloud.min.js"></script>
<script>
    layui.use(['layer', 'admin','xmSelect'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var admin = layui.admin;
        var xmSelect = layui.xmSelect;

        var userNums = 0;
        admin.req(getProjectUrl() + 'sysUser/queryAll', function (res) {
            userNums = res.data.length;
            document.getElementById("sysuser").innerText = res.data[0].VALUS;
            document.getElementById("sysuser1").innerText = res.data[1].VALUS;
            document.getElementById("sysuser2").innerText = res.data[2].VALUS;
            document.getElementById("sysuser3").innerText = res.data[3].VALUS;
            document.getElementById("sysuser4").innerText = res.data[0].VALUS - res.data[3].VALUS - res.data[2].VALUS;
            document.getElementById("sysuser5").innerText = res.data[4].VALUS;

            /* var question = res.data[5].question;
             for(var i = 0; i < question.length;i++){
                 strs += "<div class=\"layui-form-item\">\n" +
                     "                           <label class=\"layui-form-label\" style='display: none'>"+question[i].id+"</label>\n" +
                     "                           <label class=\"layui-form-label\" style='width: 100%;text-align: left;color: #0a84ff;font-size: 16px'>"+question[i].tiltle+
                     "                       </div>\n" +
                     "                       ";
             }
             strs +="</div>"*/

        }, 'get');

        $("#schoolAnaly").click(function (res) {
            var layIndex = admin.open({
                type: 2,
                title: '学员分析',
                content: getProjectUrl() + 'sysUser/userAnaly',
                area: ['1200px', '500px'],
                success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }
            });
        })

        $("#questionInfo").click(function () {
            var layIndex = admin.open({
                type: 2,
                title: '问卷分析统计',
                content: getProjectUrl() + 'sysUser/questionAnaly',
                area: ['650px', '450px'],
                shadeClose: true,
                zIndex: 1990,
                /*success: function (layero, dIndex) {
                    // 弹窗超出范围不出现滚动条
                    $(layero).children('.layui-layer-content').css('overflow', 'visible');
                    $(layero).find('[lay-submit]').focus();
                }*/
            });
        })
        //调查问卷统计
        getSuvery();
        /** 渲染日统计图表 */
        var myCharts1 = echarts.init(document.getElementById('consoleChartsDay'));
        var options1 = {
            title: {
                text: '培训层次',
                textStyle: {fontSize: 18, color: '#262626', fontWeight: 'normal'},
                subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
            },
            tooltip: {trigger: 'item'},
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
                // data: ['已签到', '未签到'], textStyle: {color: '#595959'}
            },
            series: []
        };
        myCharts1.setOption(options1);

        function getSuvery() {
            admin.req(getProjectUrl() + 'testpaper/surveyInfo', function (SupervisorRes) {
                // 饼状图赋值
                myCharts1.setOption({
                    series: [{
                        type: 'pie',
                        radius: '70%',
                        data: SupervisorRes.data,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0,0,0,0.5)'
                            },
                        },
                    }]
                });
            });
        }

        /** 立功受奖统计图表 */
        var myCharts2 = echarts.init(document.getElementById('consoleChartsWeek'));
        var options2 = {
            tooltip: {},
            legend: {},
            xAxis: {
                name: '名称',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                axisLabel: {
                    rotate: 15,
                    margin: 5
                }
            },
            yAxis: {
                name: '人数',
                type: 'value'
            },
            series: [
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                },
                {
                    type: 'bar',
                }],
            dataZoom: [{
                type: 'slider',
                state: 0,
                end: 50
            }]
        };
        myCharts2.setOption(options2);
        getUserMerInfo();

        function getUserMerInfo() {
            admin.req(getProjectUrl() + 'sysUserInfo/queryUserMer', function (res) {
                myCharts2.setOption({
                    dataset: {
                        source: res.data
                    }
                })
            });
        }

        //调查问卷统计明细
        /*getSuveryDetail();
        function getSuveryDetail() {
          admin.req(getProjectUrl() + 'testpaper/surveyInfoDetail', function (res) {
            myCharts2.setOption({
              dataset: {
                source: res.data
              }
            })
          });
        }*/
        var orgTreeRenderIns = {};
        admin.req(getProjectUrl() + 'sysOrg/tree', function (res) {
            // 渲染下拉树
            orgTreeRenderIns = xmSelect.render({
                el: '#orgSelectBox',
                name: 'orgId',
                height: '250px',
                layVerify: 'required',
                layVerType: 'tips',
                data: res.data,
                initValue:[],
                model: {label: {type: 'text'}},
                prop: {
                    name: 'title',
                    value: 'id'
                },
                radio: true,
                clickClose: true,
                tree: {
                    show: true,
                    indent: 15,
                    strict: false,
                    expandedKeys: true
                },
                on: function(data) {
                    var orgId = data.change[0].id;
                    getActiveDetail(orgId);
                },
                tips: '请选择机构'
            });
        }, {async: false});



        var myCharts3 = echarts.init(document.getElementById('consoleChartsMonth'));
        var options3 = {
            tooltip: {trigger: 'item',},
            legend: {
                top: '5%',
                left: 'center'
            },
            series: [{
                name: "活动情况",
                type: 'pie',
                radius: ['40%', '70%'],
                avoidLabelOverlap: false,
                padAngle: 3,
                itemStyle: {
                    borderRadius: 10
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 24,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
            }]
        };
        myCharts3.setOption(options3);
        // 赋值
        //调查进度统计明细
        getActiveDetail("");
        function getActiveDetail(orgId) {
            admin.req(getProjectUrl() + 'sysUser/getActivety?orgId='+orgId, function (res) {
                var vals = res.data
                //if (vals.length > 0) {
                myCharts3.setOption({
                    series: [{
                        data: vals
                    }]
                })
                // }
            });
        }

        var remoteDataRenderIns = {};
        admin.req(getProjectUrl() + 'sysUserInfo/getItemInfo', JSON.stringify([]), function (res) {
            getGradeInfo(res.data[0].name)
            remoteDataRenderIns = xmSelect.render({
                el: '#team',
                name: 'team',
                data: res.data,
                initValue: [res.data[0].id],
                layVerify: 'required',
                layVerType: 'tips',
                radio: true,
                clickClose: true,
                prop: {
                    name: 'name',
                    value: 'id'
                },callback: function(xmselect){
                },
                on: function(data) {
                    var team = data.change[0].name;
                    getGradeInfo(team);
                },
                tips: '请选择学期'
            });
        }, 'post');
        /**立功受奖*/
        var myCharts4 = echarts.init(document.getElementById('consoleChartsWord'));
        var options4 = {
            title: {
                left: 'center',
                text: '各科平均成绩',
                textStyle: {
                    fontSize: 12 // 这里设置标题字体大小为20
                }
            },
            tooltip: {},
            legend: {},
            xAxis: {
                name: '科目',
                nameTextStyle: {color: '#595959'},
                type: 'category',
                axisLabel: {
                    rotate: 15,
                    margin: 5
                }
            },
            /*grid: {
                top:85,
            },*/
            yAxis: {
                name: '平均成绩',
                type: 'value'
            },
            series: [
                {
                    type:'bar'
                }
            ],
            dataZoom: [{
                type: 'slider',
                state: 0,
                end: 30
            }]
        };
        myCharts4.setOption(options4);
        // 赋值
        //调查进度统计明细
        //getGradeInfo("");
        var val5 = "";
        function getGradeInfo(name) {
            var json = {};
            admin.req(getProjectUrl() + 'sysUserStuScore/analyse',{
                "team": name,
            }, function (res) {
                var subjectNameList = res.data.subjectNameList;//科目
                var subjectAvgScoreList = res.data.subjectAvgScoreList;//科目
                myCharts4.setOption({
                    xAxis: {data: subjectNameList},
                    series: [{data: subjectAvgScoreList}]
                });
                /*if(options4.series.length < 1){
                    for(var i = 0;i < vals.length-1;i++){
                        options4.series.push({
                            type:'bar'
                        })
                    }
                }*/
                val5 = res.data.subjectNameList[0];
                getAverageInfo(remoteDataRenderIns.getValue("name")[0],res.data.subjectNameList[0])
            },'post');
        }


        var myCharts5 = echarts.init(document.getElementById('consoleAverage'));
        var options5 = {
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow',
                    label: {
                        interval: 0,
                        show: true
                    }
                },
            },
            title: {
                left: 'right',
                text: '',
                textStyle: {
                    fontSize: 12
                }
            },
            grid: {
                top: '10%',
                bottom: '25%',
                right: '20%'
            },
            xAxis: {
                name: '单位',
                data: [],
                axisLabel: {
                    rotate: 15
                }
            },
            yAxis: {
                name: '平均成绩',
            },
            calculable: true,
            dataZoom: [
                {
                    show: true,
                    start: 0,
                    end: 40,
                },
                {
                    type: 'inside',
                    start: 0,
                    end: 40
                },
            ],
            series: [
                {
                    type: 'bar',
                    data: [],
                    itemStyle: {
                        // 设置柱子颜色
                        color: 'green'
                    }
                },
                {
                    type: 'line',
                    data: [],
                }
            ]
        };
        myCharts5.setOption(options5);

        myCharts4.on('click', function (params) {
            // 检查点击的是否是柱子
            if (params.componentType === 'series' && params.seriesType === 'bar') {
                // 获取点击的柱子的数据值和名字,学期、科目
                var data = params.data;
                val5 = params.name;
                var name = remoteDataRenderIns.getValue("name")[0];
                getAverageInfo(name,val5);

            }
        });
        myCharts5.on('click', function (params) {
            // 检查点击的是否是柱子
            if (params.componentType === 'series' && params.seriesType === 'bar') {
                // 获取点击的柱子的数据值和名字,学期、科目
                var data = params.data;
                var subject = params.name;
                var name = remoteDataRenderIns.getValue("name")[0];
                getGradeDetail(name,val5,subject);

            }
        });

        function getAverageInfo(name,subject) {
            admin.req(getProjectUrl() + 'sysUserStuScore/analyse',{
                "team": name,
                "subject":subject
            }, function (res) {
                var subjectNameList = res.data.subjectNameList;//科目
                var subjectAvgScoreList = res.data.subjectAvgScoreList;//科目
                myCharts5.setOption({
                    title:{text:name+"("+subject+")平均成绩"},
                    xAxis: {data: subjectNameList},
                    series: [{data: subjectAvgScoreList},{data: subjectAvgScoreList}]
                });
                getGradeDetail(name,subject,res.data.subjectNameList[0])
            },'post');
        }



        /** 渲染月统计图表 */
        var myCharts6 = echarts.init(document.getElementById('consoleRate'));
        var options6 = {
            title: {
                text: '',
                textStyle: {fontSize: 12, color: '#262626'},
                subtextStyle: {fontSize: 56, color: '#10B4E8'}, itemGap: 20
            },
            tooltip: {trigger: 'item'},
            legend: {
                orient: 'vertical', right: '0px', top: '0px',
            },
            series: []

        };
        myCharts6.setOption(options6);
        //调查进度统计明细
        //getGradeDetail();

        function getGradeDetail(name,subject,orgName) {
            admin.req(getProjectUrl() + 'sysUserStuScore/analyse',{
                "team": name,
                "subject":subject,
                "unit":orgName
            },  function (SupervisorRes) {
                // 饼状图赋值
                myCharts6.setOption({
                    title:{text:orgName+name+"("+subject+")优秀率"},
                    series: [{
                        type: 'pie',
                        radius: '70%',
                        data: SupervisorRes.data.assessScoreList,
                        emphasis: {
                            itemStyle: {
                                shadowBlur: 10,
                                shadowOffsetX: 0,
                                shadowColor: 'rgba(0,0,0,0.5)'
                            },
                        },
                        tooltip: {
                            trigger: "item",
                            formatter: "{b}:<br/> {c} ({d}%)"
                        },
                        label : {
                            normal : {
                                formatter: '{b}:{c}: ({d}%)',
                                textStyle : {
                                    fontWeight : 'normal',
                                    fontSize : 15
                                }
                            }
                        }
                    }]
                });
            },'post');
        }

        /** 窗口大小改变事件 */
        window.onresize = function () {
            myCharts1.resize();
            myCharts2.resize();
            myCharts3.resize();
            myCharts4.resize();
            myCharts5.resize();
            myCharts6.resize();
        };

    });
</script>
</body>
</html>
